<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>电商网站制作</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript" src="js/ie6Fixpng.js"></script>
<![endif]-->
</head>
<body>
<div class="headTop minWidth">
	<div class="topBar">
		<div class="comWidth">
			<div class="top-left">
				<a href="#" class="collection">收藏慕课</a>
			</div>
			<div class="top-right">
			    欢迎来到慕课网！<span><a href="登录.html">[登录]</a></span><span><a href="注册.html">[注册]</a></span>
			</div>
		</div>
	</div>
	<div class="logoBar">
		<div class="comWidth">
			<div class="logo fl">
				<a href="index.html"><img src="images/icon/logo3.png" alt=""></a>
			</div>
			<div class="search-box fl">
				<input type="text" name="" class="search-text fl">
				<input type="button" value="搜 索" class="search-btn fl">
			</div>
			<div class="shopBar fr">
				<span class="shopBar-cart fl">购物车</span>
				<span class="shopBar-num fl">0</span>
			</div>
		</div>
		
	</div>
	<div class="navBox">
		<div class="comWidth">
			<div class="menu-left fl">
				<h3>全部商品分类<i></i></h3>
				<div class="menu-show">
					<dl class="menu-item">
						<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
						<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
					</dl>
					<dl class="menu-item menu-item-active">
						<dt><a href="#" class="b">电脑</a> <a href="#" class="b">硬件外设</a> <a href="#" class="aLink">装机宝</a></dt>
						<dd><a href="#">笔记本</a> <a href="#">台式机</a> <a href="#">超极本</a> <a href="#">平板</a></dd>
					</dl>
					<dl class="menu-item">
						<dt><a href="#" class="b">大家电</a> <!-- <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a> --></dt>
						<dd><a href="#">电视</a> <a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a></dd>
					</dl>
					<dl class="menu-item">
						<dt><a href="#" class="b">厨房电器</a> <a href="#" class="b">生活电器</a> <!-- <a href="#" class="aLink">合约机</a> --></dt>
						<dd><a href="#">空气净化器</a> <a href="#">微波炉</a> <a href="#">取暖设备</a></dd>
					</dl>
					<dl class="menu-item">
						<dt><a href="#" class="b">食品/饮料/生鲜</a> <!-- <a href="#" class="b">数码</a> --> <a href="#" class="aLink">粮油</a></dt>
						<dd><a href="#">进口</a> <a href="#">方便面</a> <a href="#">零食</a> <a href="#">保健</a></dd>
					</dl>
				</div>
				<div class="menu-list">
					<dl class="menu-list-item">
						<dt>电脑整机</dt>
						<dd>
							<a href="#">笔记本</a><a href="#">超极本</a><a href="#">上网本</a><a href="#">平板电脑</a><a href="#">台式机</a>
						</dd>
						<hr>
					</dl>
					<dl class="menu-list-item">
						<dt>装机配件</dt>
						<dd>
							<a href="#">CPU</a><a href="#">硬盘</a><a href="#">SSD固态硬盘</a><a href="#">内存</a><a href="#">显示器</a><a href="#">散热器</a><a href="#">智能显示器</a><a href="#">主板</a><a href="#">显卡</a><a href="#">机箱</a><a href="#">电源</a><a href="#">刻录机/光驱</a><a href="#">声卡</a><a href="#">拓展卡</a><a href="#">服务器配件</a><a href="#">DIY小附件</a><a href="#">装机/配件安装</a>
						</dd>
						<hr>
					</dl>
					<dl class="menu-list-item">
						<dt>整机配件</dt>
						<dd>
							<a href="#">电脑包</a><a href="#">电脑桌</a><a href="#">电池</a><a href="#">电源适配器</a><a href="#">贴膜</a><a href="#">清洁用品</a><a href="#">笔记本散热器</a><a href="#">USB拓展</a><a href="#">平板配件</a><a href="#">特色配件</a><a href="#">插座网线/电话线</a><a href="#">影音线材</a><a href="#">电脑线材</a>
						</dd>
						<hr>
					</dl>
					<dl class="menu-list-item">
						<dt>电脑外设</dt>
						<dd>
							<a href="#">鼠标</a><a href="#">键盘</a><a href="#">游戏外设</a><a href="#">移动硬盘</a><a href="#">摄像头</a>a href="#">高清播放器</a><a href="#">外置盒</a><a href="#">移动硬盘包</a><a href="#">手写板/绘图板</a>
						</dd>
						<hr>
					</dl>
					<dl class="menu-list-item">
						<dt>网络设备</dt>
						<dd>
							<a href="#">路由器</a><a href="#">网卡</a><a href="#">3G无线上网</a><a href="#">交换机</a><a href="#">网络存储</a><a href="#">布线工具</a><a href="#">网络配件</a><a href="#">正版软件</a>
						</dd>
						<hr>
					</dl>
					<dl class="menu-list-item">
						<dt>音频设备</dt>
						<dd>
							<a href="#">音箱</a><a href="#">耳机/耳麦</a><a href="#">麦克风</a><a href="#">声卡</a><a href="#">音频附件</a><a href="#">录音笔</a>
						</dd>
						<hr>
					</dl>
					<div class="menu-list-links">
						<a href="#">电脑整机频道<i></i></a><a href="#">硬件/外设频道<i></i></a>
					</div>
				</div>
				</div>
			<div class="nav fl">
				<ul>
					<li><a href="产品筛选页.html" class="active">数码城</a></li>
					<li><a href="#">天黑黑</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">发现</a></li>
					<li><a href="#">二手特卖</a></li>
					<li><a href="#">名品汇</a></li>
				</ul>
			</div>
		</div>
		
	</div>
</div>
<div class="banner comWidth clearfix">
	<div class="banner_bar banner_big">
		<ul class="imgBox">
			<li><a href="#"><img src="images/banner1.jpg" alt="banner"></a></li>
			<li><a href="#"><img src="images/banner2.jpg" alt="banner"></a></li>
			<li><a href="#"><img src="images/banner3.jpg" alt="banner"></a></li>
		</ul>
		<div class="imgNum">
			<a href="#" class="active"></a><a href="#"></a><a href="#"></a>
		</div>
	</div>
</div>
<div class="shopTit comWidth">
	<span class="icon"></span><h3>家用电器</h3>
	<a href="#" class="more">更多&gt;&gt;</a>
</div>
<div class="shopList comWidth clearfix">
	<div class="leftArea">
		<div class="banner_bar banner_sm">
			<ul class="imgBox">
				<li><a href="#"><img src="images/banner_sm1.jpg" alt="banner"></a></li>
				<li><a href="#"><img src="images/banner_sm2.jpg" alt="banner"></a></li>
				<li><a href="#"><img src="images/banner_sm1.jpg" alt="banner"></a></li>
			</ul>
			<div class="imgNum">
				<a href="#" class="active"></a><a href="#"></a><a href="#"></a>
			</div>
		</div>
	</div>
	<div class="rightArea">
		<div class="shopList_top clearfix">
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product1.jpg" alt=""></a>
				</div>
				<h3>HTC新渴望8系列</h3>
				<p>1899元</p>
			</div>
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product1.jpg" alt=""></a>
				</div>
				<h3>HTC新渴望8系列</h3>
				<p>1899元</p>
			</div>
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product1.jpg" alt=""></a>
				</div>
				<h3>HTC新渴望8系列</h3>
				<p>1899元</p>
			</div>
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product1.jpg" alt=""></a>
				</div>
				<h3>HTC新渴望8系列</h3>
				<p>1899元</p>
			</div>
		</div>
		<div class="shopList_sm">
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product2.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>NFC技术一碰轻松配对！接触屏幕</p>
					<h3>￥149.00</h3>
				</div>
			</div>
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product3.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>NFC技术一碰轻松配对！接触屏幕</p>
					<h3>￥149.00</h3>
				</div>
			</div>
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product4.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>NFC技术一碰轻松配对！接触屏幕</p>
					<h3>￥149.00</h3>
				</div>
			</div>
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product5.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>NFC技术一碰轻松配对！接触屏幕</p>
					<h3>￥149.00</h3>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="shopTit comWidth">
	<span class="icon"></span><h3>食品酒水</h3>
	<a href="#" class="more">更多&gt;&gt;</a>
</div>
<div class="shopList comWidth clearfix">
	<div class="leftArea">
		<div class="banner_bar banner_sm">
		<ul class="imgBox">
			<!-- <li><a href="#"><img src="images/banner_sm1.jpg" alt="banner"></a></li> -->
			<li><a href="#"><img src="images/banner_sm2.jpg" alt="banner"></a></li>
		</ul>
		<!-- <div class="imgNum">
			<a href="#" class="active"></a><a href="#"></a><a href="#"></a>
		</div> -->
	</div>
	</div>
	<div class="rightArea">
		<div class="shopList_top clearfix">
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product6.jpg" alt=""></a>
				</div>
				<h3>三月美食狂享购</h3>
				<p>50元</p>
			</div>
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product6.jpg" alt=""></a>
				</div>
				<h3>三月美食狂享购</h3>
				<p>50元</p>
			</div>
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product6.jpg" alt=""></a>
				</div>
				<h3>三月美食狂享购</h3>
				<p>50元</p>
			</div>
			<div class="shop_item">
				<div class="shop_img">
					<a href="#"><img src="images/product6.jpg" alt=""></a>
				</div>
				<h3>三月美食狂享购</h3>
				<p>50元</p>
			</div>
		</div>
		<div class="shopList_sm">
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product7.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>康比特 维他保咀嚼片 60片</p>
					<h3>￥600.00</h3>
				</div>
			</div>
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product7.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>康比特 维他保咀嚼片 60片</p>
					<h3>￥600.00</h3>
				</div>
			</div>
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product7.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>康比特 维他保咀嚼片 60片</p>
					<h3>￥600.00</h3>
				</div>
			</div>
			<div class="shopItem_sm">
				<div class="shopItem_smImg">
					<a href="#"><img src="images/product7.jpg" alt=""></a>
				</div>
				<div class="shopItem_text">
					<p>康比特 维他保咀嚼片 60片</p>
					<h3>￥600.00</h3>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 顶部 -->
<div class="main"></div>	
<!-- 主题区域 -->
<div class="hr_25"></div>
<div class="footer minWidth">
	<p><a href="#">慕课简介&nbsp;|&nbsp;</a><a href="#">慕课公告&nbsp;|&nbsp;</a><a href="#">招贤纳士&nbsp;|&nbsp;</a><a href="#">联系我们&nbsp;|&nbsp;</a><a href="#">客服热线：400-675-1234</a>
	<p>Copyright&nbsp;©&nbsp;2006&nbsp;-&nbsp;2014&nbsp;慕课版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123</p>
	<p class="footer-credit"><a href="#"><img src="images/icon/footer1.png" alt=""></a><a href="#"><img src="images/icon/footer2.png" alt=""></a><a href="#"><img src="images/icon/footer3.png" alt=""></a><a href="#"><img src="images/icon/footer4.png" alt=""></a></p>
</div>
<!-- 底部 -->
<script type="text/javascript">
window.onload=function(){
	var oMenu=document.getElementsByClassName("menu-left")[0];
	var oMenu_item=oMenu.getElementsByClassName("menu-item");
	var oMenu_list=oMenu.getElementsByClassName("menu-list")[0];
	var b;
	for (var i = 0; i < oMenu_item.length; i++) {
	 	oMenu_item[i].onmouseover=function(){
	 		
	 		for (var i = 0; i < oMenu_item.length; i++) {
	 			if (oMenu_item[i].className.indexOf("menu-item-active")) {
	 				oMenu_item[i].className=oMenu_item[i].className.replace(/ menu-item-active/g,"");
	 			}
	 		}
	 		this.className+=" menu-item-active";
	 		oMenu_list.style.display="block";
	 		oMenu_list.style.zIndex=2;
	 		oMenu_list.style.backgroundColor="#fff";
	 	}
	 	oMenu_item[i].onmouseout=function(){
	 		
	 		/*for (var i = 0; i < oMenu_item.length; i++) {
	 			if (oMenu_item[i].className.indexOf("menu-item-active")!=-1) {
	 				oMenu_item[i].className.replace("menu-item-active","")
	 			}
	 			
	 		}*/
	 		this.className=this.className.replace(/ menu-item-active/g,"");
	 		oMenu_list.style.display="none";
	 	}
	 } 

	 //焦点图
	var oDiv=document.getElementsByClassName("banner_bar")[0];
	var oDiv2=document.getElementsByClassName("banner_bar")[1];
	var pic=oDiv.getElementsByTagName("li"),pic2=oDiv2.getElementsByTagName("li");
	var num=document.getElementsByClassName('imgNum')[0].getElementsByTagName('a');
	var num2=document.getElementsByClassName('imgNum')[1].getElementsByTagName('a');
	var index=0,timer=null;

	if (timer) {
		clearInterval(timer);
		timer=null;
	}
	timer=setInterval(function(){
		index++;
		if (index>2) {
			index=0;
		}
		changePic(index);
	},2000)

	function changePic(picNum){
		for (var i = 0; i < pic.length; i++) {
			pic2[i].style.display=pic[i].style.display="none";
			num2[i].className=num[i].className='';
		}
		pic2[picNum].style.display=pic[picNum].style.display="block";
		num2[picNum].className=num[picNum].className="active";
		index=picNum;
	}
	oDiv2.onmouseover=oDiv.onmouseover=function(){
		clearInterval(timer);
        timer=null;
	}
	oDiv2.onmouseout=oDiv.onmouseout=function(){
		timer=setInterval(function(){
            index++;
            if (index>2) {
            index=0;
        }
        changePic(index);
        },2000)
    }
    for (var j = 0; j<num.length;j++) {
    	num2[j].index=num[j].index=j;
    	num2[j].onmouseover=num[j].onmouseover=function(){
    		changePic(this.index);
    	}
    }
}
</script>
</body>
</html>